<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组函数</title>
</head>

<body>
    <script>
        /* 1. 数组.sort(排序规则) :根据设定的排序规则进行数组返回  */
        //注意:sort() 会修改原数组 
        /*比较函数的用法:比较函数接收两个参数 a（前一个元素）和 b（后一个元素），返回值决定排序方向：
                返回 负数：a 排在 b 前面
                返回 正数：b 排在 a 前面
                返回 0：a 和 b 位置不变 */
        console.log("1.数组.sort(排序规则) 排序函数的应用示例如下：");

        let num = [15, 3, 42, 89]
        console.log("默认排序: ", num.sort())
        console.log("sort((a, b) => a - b) 升序： ", num.sort((a, b) => a - b))
        console.log("sort((a, b) => b - a) 降序: ", num.sort((a, b) => b - a))
        console.log("最后的数组： ", num)

        console.log("\n")

        let str = ["a", "gdf", "d", "ef"]
        console.log("默认排序: ", str.sort())
        console.log("sort((a, b) => a.length - b.length) 升序： ", str.sort((a, b) => a.length - b.length))
        console.log("sort((a, b) => b.length - a.length) 降序: ", str.sort((a, b) => b.length - a.length))
        console.log("最后的数组： ", str)

        console.log("\n")
        console.log("\n")


        /* 2. 数组.forEach(回调函数) :遍历数组，对每个元素执行回调函数，无返回值  */
        //注意: forEach(回调函数)的括号里必须出现当前正在处理的数组元素,并且一个一个输出
        console.log("2.数组.forEach(回调函数) 遍历函数的应用示例如下：");

        num = [15, 3, 42, 89]
        num.forEach((num) => console.log(num))

        console.log("带文字展示如下：")
            //index索引和array数组这俩是可以省略的参数
            /*forEach（）括号里完整蚕食是按位置展示不同内容：
                第一个num所在位置展示  数组元素
                第二个index所在位置展示  数组元素索引
                第三个array所在位置展示  数组原函数 */
        num.forEach((num, index, array) => {
            console.log("索引" + index + ":" + num + ", 数组:[" + array + "]")
        })

        console.log("\n")
        console.log("\n")


        /* 3. 数组.map(回调函数) :遍历数组，通过回调函数处理每个元素，返回新数组（不改变原数组）  */
        //注意:全部同 forEach() 函数一致，只是map（）函数会返回一个新的数组
        console.log("3.数组.map(回调函数) 遍历函数的应用示例如下：");

        num = [15, 3, 42, 89]
        let number = num.map((num) => num - 2)
        console.log("map()函数执行前原数组：", num)
        console.log("map()函数执行后新数组：", number)

        console.log("\n")

        number = num.forEach((num) => num - 2)
        console.log("forEach()函数执行前原数组：", num)
        console.log("forEach()函数执行后新数组：", number)

        console.log("\n")
        console.log("\n")


        /* 4. 数组.filter(回调函数) :回调函数的条件筛选元素，返回符合条件的新数组  */
        //注意:filter()回调函数里的三个完整参数和forEach()、map()函数一样
        console.log("4.数组.filter(回调函数) 迭代函数的应用示例如下：")
        num = [15, 3, 42, 89]
        number = num.filter((num) => num % 2 !== 0)
        console.log("filter()函数执行前原数组：", num)
        console.log("filter()函数执行后新数组：", number)

        console.log("\n")
        console.log("\n")


        /* 5. 数组.push(添加的元素) :向数组末尾添加一个或多个元素，返回新数组的长度（改变原数组） */
        //注意:①push()函数要添加到数组末尾的一个或多个元素可以用逗号，
        //②添加的元素可以是任意数据类型（数字、字符串、对象、数组等）
        console.log("5.数组.push(添加的元素) 添加函数的应用示例如下：")
        num = [15, 3, 42, 89]
        console.log("push()函数执行前原数组num：", num)
        number = num.push(5, "苹果", {
            name: '对象'
        }, [2, 4])
        console.log("push()函数执行结果：", number)
        console.log("push()函数执行后新数组num：", num)

        console.log("\n")
        console.log("\n")


        /* 6. 数组.indexOf(查早元素):查找元素在数组中首次出现的索引，不存在则返回 -1 */
        console.log("6.数组.indexOf() 查找函数的应用示例如下：")
        num = [15, 3, 42, 89]
        console.log("数组num：", num)
        number = num.indexOf(42)
        console.log("num.indexOf(42) 执行结果：", number)
            //完整有两个参数，前一个是查询元素，后一个是查询起始索引
        number = num.indexOf(15, 1)
        console.log("num.indexOf(15,1) 执行结果：", number)

        console.log("\n")
        console.log("\n")

        /* 7. 数组.includes() 判断数组是否包含指定元素，返回布尔值 */
        console.log("7.数组.includes() 判断函数的应用示例如下：")
        num = [15, 3, 42, 89]
        console.log("数组num：", num)
        number = num.includes(42)
        console.log("num.includes(42) 执行结果：", number)
            //完整有两个参数，前一个是查询元素，后一个是查询起始索引
            /*查询起始索引说明：①对于数组：若为负数，则表示从数组末尾向前数的偏移量（例：-2 表示从倒数第二个元素开始向后查询判断）
            ②对于字符串：若为负数，会被当作 0 处理（从开头开始查找）
            ③如果大于等于数组（或字符串）长度，则返回 false（表示不会找到）*/
        number = num.includes(15, 1)
        console.log("num.includes(15, 1) 执行结果：", number)
        number = num.includes(3, -2)
        console.log("num.includes(3,-2) 执行结果：", number)
        number = num.includes(42, 4)
        console.log("num.includes(42,4) 执行结果：", number)

        console.log("\n")
        console.log("\n")


        /* 8. 数组.join(分隔符)： 将数组元素拼接为字符串，可指定分隔符（默认逗号） */
        console.log("8.数组.join() 拼接函数的应用示例如下：")
        num = [15, 3, 42, 89]
        console.log("数组num：", num)
        number = num.join(" || ")
        console.log("num.join(" || ") 执行后数组number： ", number);
        console.log("num.join(" || ") 执行后数组num： ", num);

        console.log("\n")
        console.log("\n")


        /* 9. 数组.pop(): 删除数组最后一个元素，返回被删除的元素（改变原数组） */
        //注意：pop() 函数没有参数，若数组为空（长度为 0），则返回 undefined
        console.log("9.数组.pop() 删除函数的应用示例如下：")
        num = [15, 3, 42, 89]
        console.log("数组num：", num)
        number = num.pop()
        console.log("num.pop() 执行结果： ", number)
        console.log("函数执行后数组num： ", num)

        console.log("\n")
        console.log("\n")


        /* 10. 数组.shift(): 删除数组第一个元素，返回被删除的元素（改变原数组） */
        //注意：shift() 函数没有参数，若数组为空（长度为 0），则返回 undefined
        console.log("10.数组.shift() 删除函数的应用示例如下：")
        num = [15, 3, 42, 89]
        console.log("数组num：", num)
        number = num.shift()
        console.log("num.shift() 执行结果： ", number)
        console.log("函数执行后数组num： ", num)

        console.log("\n")
        console.log("\n")


        /* 11. 数组.slice(起始索引，终止索引): 截取数组的一部分，返回新数组（不改变原数组） */
        //注意：①若slice() 参数为负数，表示从末尾开始计算的偏移量（例如 -1 表示倒数第一个元素 / 字符）
        //②不包含结束索引
        console.log("11.数组.slice() 截取函数的应用示例如下：")
        num = [15, 3, 42, 89]
        console.log("数组num：", num)
        number = num.slice(1, 3)
        console.log("num.slice(1,3) 执行结果： ", number)
        console.log("函数执行后数组num： ", num)
        number = num.slice(-3, -2)
        console.log("num.slice(-3,-2) 执行结果： ", number)

        console.log("\n")
        console.log("\n")


        /* 12. 数组.splice(起始索引,删除数量,新增元素): 增删改数组元素，返回被删除的元素（改变原数组) */
        //注意：①起始索引是必须的，另外两个可选
        //②splice（）函数返回一个新数组，包含被删除的元素。如果没有删除元素，则返回空数组
        //③增加的在删除的位置，不是最后
        console.log("12.数组.splice 增删改函数的应用示例如下：")
        num = [15, 3, 42, 89]
        console.log("数组num：", num)
        number = num.splice(2)
        console.log("num.splice(2) 执行结果： ", number)
        console.log("函数执行后数组num： ", num)

        console.log("\n")

        //仅删除
        console.log("数组num：", num)
        number = num.splice(1, 2)
        console.log("num.splice(1,2) 执行结果： ", number)
        console.log("函数执行后数组num： ", num)

        console.log("\n")

        //仅添加
        console.log("数组num：", num)
        number = num.splice(1, 0, 8, 6, 7)
        console.log("num.splice(1,0,8,6,7) 执行结果： ", number)
        console.log("函数执行后数组num： ", num)

        console.log("\n")

        //替换
        console.log("数组num：", num)
        number = num.splice(1, 2, 4, 5)
        console.log("num.splice(1,2,4,5) 执行结果： ", number)
        console.log("函数执行后数组num： ", num)
    </script>
</body>

</html>